<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="vmform1"
      ref="vmform1"
      class="demo-form-inline"
    >
      <el-form-item label="设备编号">
        <el-input v-model="vmform1.innerCode" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <!-- 设备管理内容 -->
      <div class="role-operate">
        <el-button
          @click="addvm"
          size="small"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff8437; width: 80px; color: #fff"
          >新建</el-button
        >
        <el-button
          @click="manyOperate"
          size="small"
          style="background-color: #fbf4f0; width: 80px; color: #666"
          >批量操作</el-button
        >
      </div>
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        :data="VmList"
      >
        <!-- 放置列 -->
        <el-table-column type="selection" width="50px" />

        <el-table-column
          prop="index"
          align="center"
          width="50px"
          label="序号"
        />
        <el-table-column prop="innerCode" align="center" label="设备编号" />
        <el-table-column
          prop="type.name"
          align="center"
          label="设备型号"
          width="75px"
        />
        <el-table-column align="center" label="详细地址">
          <template v-slot="{ row }">
            {{ row.node.addr.split("-").pop() }}
          </template>
        </el-table-column>
        <el-table-column prop="ownerName" align="center" label="合作商" />
        <el-table-column align="center" label="设备状态" width="65px">
          <template v-slot="{ row }">
            <span v-if="row.vmStatus == 0">未投放</span>
            <span v-if="row.vmStatus == 1">运营</span>
            <span v-if="row.vmStatus == 2">维修</span>
            <span v-if="row.vmStatus == 3">撤机</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="300px" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="openproductList(row)"
              >货道</el-button
            >
            <el-button size="mini" type="text" @click="details(row)"
              >策略</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="ChangeVm(row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row
        type="flex"
        style="height: 60px"
        align="middle"
        justify="space-between"
      >
        <el-col :span="12"
          ><span style="font-size: 13px; color: #999; padding-left: 12px"
            >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
              totalpage
            }}页</span
          ></el-col
        >
        <el-col :push="12">
          <el-button-group>
            <el-button
              type="primary"
              @click="innPage"
              size="mini"
              :disabled="pageParams.pageIndex == 1"
              icon="el-icon-arrow-left"
              style="
                background-color: #d5ddf8;
                color: #000;
                margin-right: 12px;
                border: none;
              "
              >上一页</el-button
            >
            <el-button
              type="primary"
              @click="addPage"
              size="mini"
              :disabled="pageParams.pageIndex == this.totalpage"
              style="background-color: #d5ddf8; color: #000; border: none"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-col>
      </el-row>

      <!-- 新增设备的dialog -->
      <el-dialog
        title="新增合作商"
        :visible.sync="dialogFormVisible"
        @close="closefn"
      >
        <el-form
          :model="addVmForm"
          :rules="rules"
          label-width="100px"
          ref="vmform"
        >
          <el-form-item label="设备编号">
            <span>系统自动生成</span>
          </el-form-item>
          <el-form-item label="选择型号" prop="vmType">
            <el-select
              style="width: 350px"
              v-model="addVmForm.vmType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in vmtypelist"
                :key="item.id"
                :value="item.typeId"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择点位" prop="nodeId">
            <el-select
              style="width: 350px"
              v-model="addVmForm.nodeId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in nodelist"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quitfn">取 消</el-button>
          <el-button type="primary" @click="submitfn">确 定</el-button>
        </div>
      </el-dialog>
<!-- 修改设备的dialog -->
<el-dialog
        title="修改设备"
        :visible.sync="changeVmDialog"
        @close="changeVmDialog = false"
      >
     <el-form  label-width="100px" size="mini">
      <el-form-item label="机器编号："><span>{{changvmobj.innerCode}}</span></el-form-item>
      <el-form-item label="供货时间："><span>{{changvmobj.updateTime1}}</span></el-form-item>
      <el-form-item label="设备类型："><span>{{changvmobj.vmtype}}</span></el-form-item>
      <el-form-item label="设备容量："><span>10</span></el-form-item>
       <el-form-item label="设备点位：">
            <el-select
              style="width: 350px"
              v-model="changvmobj.nodeId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in nodelist"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
      <el-form-item label="合作商："><span>{{changvmobj.ownerName}}</span></el-form-item>
      <el-form-item label="所属区域："><span>{{changvmobj.regionname}}</span></el-form-item>
      <el-form-item label="设备地址："><span>{{changvmobj.address}}</span></el-form-item>
</el-form> 
 <div class="policybutton">
          <el-button
            @click="changeVmDialog = false"
            size="small"
            style="background-color: #fbf4f0; width: 80px; color: #666"
            >取消</el-button
          >
          <el-button
            @click="changeVmEnter(changvmobj.id,changvmobj.nodeId)"
            size="small"
            style="background-color: #ff8437; width: 80px; color: #fff"
            >确认</el-button
          >
        </div>
</el-dialog>

      <!-- 合作商详情的dialog -->
      <el-dialog
        title="策略管理"
        :visible.sync="showpolicydetaildialog"
        @close="showpolicydetaildialog = false"
      >
        <div class="area">
          <span class="title"
            >机器编号:<span class="right">{{
              policydetail.innerCode
            }}</span></span
          >

          <span class="title"
            >策略名称:<span class="right">{{
              policydetail.policyName
            }}</span></span
          >

          <span class="title"
            >策略方案:<span class="right"
              >{{ policydetail.discount }}%</span
            ></span
          >
          <span class="title"><span class="right"></span></span>
        </div>
        <el-button
          @click="cancelpoilcy(policydetail.innerCode, policydetail.policyId)"
          size="small"
          style="
            background-color: #fbf4f0;
            width: 80px;
            margin-left: 45%;
            color: #666;
          "
          >取消策略</el-button
        >
      </el-dialog>

      <!-- 批量操作的dialog -->
      <el-dialog
        title="批量策略管理"
        :visible.sync="showoperate"
        @close="closefn1"
      >
        <el-row type="flex" align="middle">
          <span style="font-size: 16px">选择策略：</span>
          <el-select
            v-model="CurrentPolicy"
            clearable
            placeholder="请选择"
            class="my-select"
          >
            <el-option
              v-for="item in PolicyList"
              :key="item.id"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-row>
        <div class="policybutton">
          <el-button
            @click="closefn1"
            size="small"
            style="background-color: #fbf4f0; width: 80px; color: #666"
            >取消</el-button
          >
          <el-button
            @click="policyEnter"
            size="small"
            style="background-color: #ff8437; width: 80px; color: #fff"
            >确认</el-button
          >
        </div>
      </el-dialog>

<PouductList ref="product" @alreadychange="getVmList" :showProductDialog.sync="showProductDialog" :originProductmsg="productmsg"></PouductList>
    </div>
  </div>
</template>
<script>
import {
  getchannelList,
  changeVm,
  cancelPolicy,
  getpolicydetails,
  getvmtypeList,
  getNodeList,
  setPolicy,
  getVmList,
  addVm,
  getregionname,
  getPolicyList,
} from "@/api/mechian";
import PouductList from './components/productlist.vue'
export default {
  name: "Vm",
  components: { PouductList } ,
  data() {
    return {
      origindata:[],
      productmsg:{},
      model: "新建",
      showProductDialog:false,
      changeVmDialog:false,
      showoperate: false,
      showpolicydetaildialog: false,
      dialogFormVisible: false,
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      addVmForm: {
        //新增设备的数据
        vmType: "",
        ndoeId: "",
      },
      vmform1: {
        innerCode: "", //根据设备号查询
      },
      changvmobj:{
        vmtype:'',
        regionname:'',
        address:'',
        updateTime1:'',
      },
      policydetail: {},
      VmList: [], //首页table 设备数组
      CurrentPolicy: "", //选中策略
      PolicyList: [], //策略数组
      vmtypelist: [], //选择型号的数据
      nodelist: [], //选择点位数据
      multipleSelection: [], //选中的行的数据
      rules: {
        vmType: [{ required: true, message: "请输入", trigger: "submit" }],
        ndoeId: [{ required: true, message: "请输入", trigger: "submit" }],
      },
    };
  },
  async created() {
    this.getVmList();
    this.getPolicyList();
    this.getsome()
  },
  methods: {
   async openproductList(row){
     // console.log(row);
      this.productmsg = row
      this.$nextTick(()=>{
        this.$refs.product.getVmMsg()
      this.showProductDialog=true
      })
    },
    async cancelpoilcy(code, id) {
      const res = await cancelPolicy(code, id);
      if (res) {
        this.$message.success("取消策略成功");
      }
      this.showpolicydetaildialog = false;
      this.getVmList();
    },
    async getsome(){
       const res = await getvmtypeList();
      this.vmtypelist = res.currentPageRecords;
      const res1 = await getNodeList();
      this.nodelist = res1.currentPageRecords;
    },
    async addvm() {
    this.dialogFormVisible = true;
    },
    async getPolicyList() {
      this.PolicyList = await getPolicyList();
      //  console.log(this.PolicyList);
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
      console.log(this.multipleSelection);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    async getVmList() {
      const res = await getVmList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.vmform1.innerCode
      );
      // console.log(res);
      this.VmList = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.VmList.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
    },
    search() {
      this.pageParams.pageIndex = 1;
      this.getVmList();
    },
    closefn() {
      this.$refs.vmform.resetFields();
      this.dialogFormVisible = false;
    },
    closefn1() {
      (this.CurrentPolicy = ""), (this.showoperate = false);
    },
    //修改策略
    async policyEnter() {
      const reslist = this.multipleSelection.map((item) => {
        return item.innerCode;
      });
      await setPolicy({
        innerCodeList: reslist,
        policyId: this.CurrentPolicy,
      }).then(() => {
        this.$message.success("设置成功");
        this.multipleSelection = [];
        this.closefn1();
        this.getVmList();
      });
    },
    //下一页
    addPage() {
      this.pageParams.pageIndex++;
      this.getVmList();
    },
    // 上一页
    innPage() {
      this.pageParams.pageIndex--;
      this.getVmList();
    },
    // 取消
    quitfn() {
      this.closefn();
    },
    // 确认提交
    submitfn() {
      this.$refs.vmform.validate(async (right) => {
        if (right) {
          await addVm({
            ...this.addVmForm,
            createUserId: 1,
          });
          this.$message.success("添加成功");
          this.pageParams.pageIndex = 1;
          this.getVmList();
          this.closefn();
        }
      });
    },
    async details(row) {
      console.log(row.innerCode);
      await getpolicydetails(row.innerCode)
        .then((res) => {
          this.policydetail = res;
          this.showpolicydetaildialog = true;
        })
        .catch((err) => {
          this.multipleSelection.push({ innerCode: row.innerCode });
          this.showoperate = true;
        });
    },
    //changeVm
    async ChangeVm(row){
      this.changvmobj=row
      console.log(this.changvmobj);
     const res= this.vmtypelist.find(item=>item.typeId===this.changvmobj.vmType)
     this.changvmobj.vmtype=res.name
     const {name}= await getregionname(this.changvmobj.regionId)
     this.changvmobj.regionname=name
     this.changvmobj.address=row.node.addr.split("-").pop()
     this.changvmobj.updateTime1=row.updateTime.replace('T',' ')
    this.changeVmDialog=true
    },
    //changeVmEnter
    async changeVmEnter(id1,id2){
     await changeVm(id1,id2).then((res)=>{
      this.$message.success('修改成功')
     })
     this.changeVmDialog=false
    },
    //批量操作
    manyOperate() {
      if (!this.multipleSelection.length) {
        this.$message.error("请先选择数据");
      } else {
        this.showoperate = true;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  .dialog-footer {
    margin-top: -30px;
  }
  .area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  .title {
    width: 50%;
    margin-bottom: 20px;
    .right {
      margin-left: 10px;
    }
  }
}
.policybutton {
  display: flex;
  height: 40px;
  margin-top: 15px;
  align-items: center;
  justify-content: center;
}
.my-select {
  width: 350px;
}
</style>
